<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>汇率管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <Form ref="formInline" label-position="left" :label-width="70" :model="formInline" inline>
      <FormItem label="货币名" prop="exName">
        <i-input :value.sync="value" placeholder="请输入..." style="width: 200px"></i-input>
      </FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
    </Form>
    <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
    <!-- <Page :total="100" show-elevator show-sizer class="fenye"/> -->

    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fe">
    </Page>
        
    <!--修改弹窗-->
    <Modal v-model="formTable.modal" title="用户修改" @on-cancel="modalCancel">
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="90"
        :model="formTable"
      >
      
        <Form-item label="货币名" prop="countryName">
          <i-input v-model="formTable.countryName" placeholder="请输入货币名"></i-input>
        </Form-item>
        <Form-item label="照片" prop="countryIcon">
          <i-input v-model="formTable.countryIcon" placeholder="请更改照片"></i-input>
        </Form-item>
        <Form-item label="汇率" prop="exRate">
          <i-input v-model="formTable.exRate" placeholder="请输入汇率"></i-input>
        </Form-item>
     
        
      </Form>
       <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>



  </div>
</template>
<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {};
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
       formInline: {
        countryName: ''
      },
      formTable: {
        modal: false,
        loading: false,
        countryName: '',
        countryIcon: '',
        exRate: '',
      },
      columns7: [
        {
          type: "selection",
          width: 80,
          align: "center"
        },
        {
          title: "编号",
          key: "exchangeId",
         
          align: "center",
          // render: (h, params) => {
          //   return h('div', [
          //     h('Icon', {
          //       props: {
          //         type: 'person'
          //       }
          //     }),
          //     h('strong', params.row.id)
          //   ])
          // }
        },
        {
          title: "货币名",
          key: "countryName",
          align: "center"
        },
        {
          title: "照片",
          key: "countryIcon",
          align: "center"
        },
        {
          title: "汇率",
          key: "exRate",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.userEdit(params.row)
                    }
                  }
                },
                "修改"
              ),
            ]);
          }
        }
      ],
      data6: [
        {
          exchangeId: "",
          countryName: "",
          countryIcon: "",
          exRate: ""
        }
      ]
    };
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getExchange();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getExchange();
    },
    getExchange(){
      this.$axios.get("exchange",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data6 = response.data.data;
        })
        .catch();
    },
    //查询
    selectSubmit(countryName) {
      this.$refs[countryName].validate(valid => {});
    },
  //修改
    editSubmit: function(data) {
      console.log(data)
      this.formTable.loading = true;
      this.$axios
        .put("exchange", {
          exchangeId: this.formTable.exchangeId,
          countryName: this.formTable.countryName,
          countryIcon: this.formTable.countryIcon,
          exRate: this.formTable.exRate,
        })
        .then(response => {
          this.formTable.loading = false;
          if (response.data.code == 0) {
            this.$Notice.success({
              title: "信息修改成功"
            });
          } else {
            this.$Notice.error({
              title: "信息修改失败"
            });
          }
          this.modalCancel();
        })
        .catch(console.log(response.data));
    },
  
    // 获取每一行值
    userEdit (row) {
      console.log (row)
      this.formTable.modal = true
      this.formTable.exchangeId = row.exchangeId
      this.formTable.countryName = row.countryName
      this.formTable.countryIcon = row.countryIcon
      this.formTable.exRate = row.exRate
    },
    // 取消修改
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
  created: function () {
    this.getExchange()
    // this.$axios
    //   .get('exchange')
    //   .then(response => {

    //    console.log(response.data)
    //     this.data6 = response.data.data
    //   })
    //   .catch()
  }
}
</script>
<style>
.fe {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
</style>